<template>
  <div class="app-main">
    <div class="layout-content">
      <keep-alive v-if="$route.meta.keepAlive">
        <router-view />
      </keep-alive>
      <!-- <transition v-else :name="viewTransition"> -->
      <router-view v-else />
      <!-- </transition> -->
    </div>
    <!-- <div class="layout-footer">
      <TabBar :data="tabbars" @change="handleChange" />
    </div> -->
  </div>
</template>

<script>
// import TabBar from '@/components/TabBar'
// import { mapState, mapActions } from 'vuex'
export default {
  name: 'AppLayout',
  components: {
    // TabBar
  },
  data() {
    return {
      // tabbars: [
      //   {
      //     title: '首页',
      //     to: {
      //       name: 'Home'
      //     },
      //     icon: 'home-o'
      //   },
      //   {
      //     title: '关于我',
      //     to: {
      //       name: 'About'
      //     },
      //     icon: 'user-o'
      //   }
      // ]
    }
  },
  computed: {
    // ...mapState('sys', {
    //   direction: state => state.direction,
    //   routerNameObj: state => state.routerNameObj,
    //   routerCount: state => state.routerCount
    // }),
    // viewTransition () {
    //   let direction = ''
    //   if (!this.direction) {
    //     direction = 'vux-fade-out'
    //   } else {
    //     direction = 'slide-' + (this.direction === 'forward' ? 'left' : 'right')
    //   }
    //   return direction
    // }
  },
  watch: {
    // $route (to, from) {
    //   // 底部tabbar状态设置
    //   // const tabIndex = to.meta.tabIndex || 0
    //   // const pageIndex = to.meta.index || 0
    //   // const isShowTabber = (pageIndex === 1 || pageIndex === 0)
    //   // this.$common.setKeyVal('tabbar', 'selectTabIndex', tabIndex)
    //   // 页面等级为0和1才显示tabbar
    //   // this.$common.setKeyVal('tabbar', 'isShowTabber', isShowTabber)
    //   // 页面切换效果设置
    //   const routerNameObj = this.routerNameObj
    //   const toIndex = routerNameObj[to.name]
    //   const fromIndex = routerNameObj[from.name]
    //   if (to.meta.index === 1) {
    //     if (from.meta.index && from.meta.index !== 1) {
    //       this.UpdateDirection('reverse')
    //     } else {
    //       this.UpdateDirection('')
    //     }
    //   } else { // 跳转 非首页
    //     if (toIndex) {
    //       if (!fromIndex || parseInt(toIndex, 10) > parseInt(fromIndex, 10) || (toIndex === '0' && fromIndex === '0')) {
    //         this.UpdateDirection('forward')
    //       } else {
    //         this.UpdateDirection('reverse')
    //       }
    //     } else {
    //       let historyCount = this.$common.getKeyVal('sys', 'historyCount', 'sessionStorage')
    //       ++historyCount
    //       this.$common.setKeyVal('sys', 'historyCount', historyCount, 'sessionStorage')
    //       routerNameObj[to.name] = historyCount
    //       if (to.name !== 'Home') {
    //         this.$common.setKeyVal('sys', 'routerNameObj', routerNameObj)
    //       }
    //       this.UpdateDirection('forward')
    //     }
    //   }

    //   if (!this.direction) {
    //     this.$store.dispatch('sys/UpdateRollbackStatus', true)
    //   } else {
    //     // if (this.direction === 'forward') {
    //     this.$store.dispatch('sys/UpdateRollbackStatus', false)
    //     // } else {
    //     //   this.$store.dispatch('sys/UpdateRollbackStatus', true)
    //     // }
    //   }
    //   // console.log('UpdateRollbackStatus:' + this.$store.state.sys.rollbackStatus)
    // }
  },
  methods: {
    // ...mapActions('sys', [
    //   'UpdateDirection', 'UpdateIsTransition'
    // ])
  }
}
</script>
<style lang="scss" scoped>

$times: 0.3s * 1;
/deep/  .van-nav-bar {
  -moz-box-shadow:1px 1px 5px #ddd;
  -webkit-box-shadow:1px 1px 5px #ddd;
  box-shadow:1px 1px 3px #ddd;
}
// .loading-box {
//   position: absolute;
//   top: 0;
//   left: 0;
//   z-index: 30;
//   width: 100vw;
//   height: 100vh;
//   background: #fff url("../static/img/gif/loading.gif") no-repeat center 20%;
//   background-size: 70%;
//   transition: all $times * 0.6 cubic-bezier(0.55, 0, 0.1, 1);
// }
// .loading-in {
//   opacity: 1;
//   transform: translate3d(100%, 0, 0);
// }
// .loadingTrans-hide {
//   opacity: 0;
// }
// .loadingTrans-enter-to {
//   transform: translate3d(0, 0, 0);
// }
// .loadingTrans-leave-active {
//   opacity: 0;
// }

/*仿APP滑动*/
/* 页面切换，转场动画实现 */
.router-view {
  // position: relative;
  z-index: 18;
  margin: 0 auto;
  // height:calc(100vh - #{$headerH});
  backface-visibility: hidden;
  // will-change: transform;
  // transition: all $times * 2 cubic-bezier(.55,0,.1,1);
  transform: translate3d(0, 0, 0);
  perspective: 1000;
}

//转场动画-2019-07-17
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  // 启用硬件加速
  will-change: transform;
  transition: all $times;
  /*position: fixed;*/
}
.slide-right-enter {
  transform: translate(-100%, 0);
  transition-timing-function: ease-in;
}
.slide-left-enter {
  transform: translate(100%, 0);
  transition-timing-function: ease-in;
}

.app-main,
.layout-content {
  margin: 0 auto;
  width: 100%;
  height: 100%;
  background-color: #fff;
}
</style>
